<template>
  <view class="content">
    <scroll-view class="scroll-view" :refresher-enabled="true" :refresher-triggered="isRefreshing" :scroll-y="true"
      :scroll-with-animation="true" :show-scrollbar="true" @refresherrefresh="onRefresh">
      <view v-for="item in list" :key="item.id" class="scroll-view-item">
        {{ item.text }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
// 列表数据
const list = ref([
  { id: 1, text: "Item 1" },
  { id: 2, text: "Item 2" },
  { id: 3, text: "Item 3" },
  // ...更多数据
]);
const isRefreshing = ref(false);
// 处理刷新
const onRefresh = () => {
  console.log("开始刷新");
  isRefreshing.value = true;

  // 模拟请求数据
  setTimeout(() => {
    // 更新数据
    list.value = [{ id: Date.now(), text: "新数据" }, ...list.value];

    // 结束刷新状态
    isRefreshing.value = false;
  }, 2000);
};
</script>

<style>
.scroll-view {
  min-height: 100vh;
  background-color: antiquewhite;
}
</style>
